1
00:00:01,150 --> 00:00:04,410
Sebagai pengantar bagian teori ini,

2
00:00:04,410 --> 00:00:06,720
Saya ingin memulai dengan yang sangat keren

3
00:00:06,720 --> 00:00:11,190
dan ikhtisar tingkat tinggi tentang bahasa JavaScript.

4
00:00:11,190 --> 00:00:13,480
Supaya Anda mendapatkan gambaran umum pertama

5
00:00:13,480 --> 00:00:16,380
dari sebagian besar hal yang perlu kita pelajari

6
00:00:16,380 --> 00:00:19,830
untuk akhirnya menguasai JavaScript.

7
00:00:19,830 --> 00:00:22,520
Dan ini akan menjadi ceramah yang panjang,

8
00:00:22,520 --> 00:00:25,303
jadi bersiaplah untuk perjalanan gila.

9
00:00:27,400 --> 00:00:30,860
Dan saya ingin memulai dengan kembali ke definisi pertama itu

10
00:00:30,860 --> 00:00:33,300
yang saya berikan kepada Anda tentang JavaScript,

11
00:00:33,300 --> 00:00:35,370
di mana saya memberi tahu Anda JavaScript itu

12
00:00:35,370 --> 00:00:37,890
adalah tingkat tinggi, berorientasi objek,

13
00:00:37,890 --> 00:00:40,980
bahasa pemrograman multi-paradigma.

14
00:00:40,980 --> 00:00:44,140
Tentu saja ini 100% benar,

15
00:00:44,140 --> 00:00:47,170
tapi itu juga hanya permukaannya saja,

16
00:00:47,170 --> 00:00:49,610
puncak gunung es.

17
00:00:49,610 --> 00:00:53,020
Lalu bagaimana dengan definisi ini?

18
00:00:53,020 --> 00:00:55,700
JavaScript adalah tingkat tinggi, berbasis prototipe,

19
00:00:55,700 --> 00:00:57,710
berorientasi objek, multiparadigma,

20
00:00:57,710 --> 00:01:00,740
ditafsirkan atau dikompilasi tepat pada waktunya,

21
00:01:00,740 --> 00:01:02,120
dinamis, berulir tunggal,

22
00:01:02,120 --> 00:01:04,090
bahasa pemrograman pengumpulan sampah

23
00:01:04,090 --> 00:01:06,000
dengan fungsi kelas satu

24
00:01:06,000 --> 00:01:10,050
dan model konkurensi loop peristiwa non-pemblokiran.

25
00:01:10,050 --> 00:01:11,760
Tunggu, apa?

26
00:01:11,760 --> 00:01:14,090
Apakah ini semacam lelucon?

27
00:01:14,090 --> 00:01:17,600
Ya, sebenarnya itu semacam itu,

28
00:01:17,600 --> 00:01:20,280
Saya hanya mengemas informasi sebanyak mungkin

29
00:01:20,280 --> 00:01:25,280
tentang JavaScript menjadi satu kalimat yang tidak terbaca, hanya untuk bersenang-senang,

30
00:01:25,970 --> 00:01:27,790
tapi selain menyenangkan,

31
00:01:27,790 --> 00:01:30,600
ini juga memberi kita peluang besar

32
00:01:30,600 --> 00:01:34,960
untuk membongkar semua ini untuk mendapatkan pandangan pertama

33
00:01:34,960 --> 00:01:38,380
ke dalam semua hal yang akan kita pelajari tentang JavaScript

34
00:01:38,380 --> 00:01:40,010
sepanjang kursus.

35
00:01:40,010 --> 00:01:44,210
Dan ini bukan untuk mengintimidasi Anda. Sebenarnya tidak.

36
00:01:44,210 --> 00:01:46,550
Saya hanya ingin Anda mendapatkan gambaran besarnya

37
00:01:46,550 --> 00:01:48,960
sebelum benar-benar memulai

38
00:01:48,960 --> 00:01:51,170
dan juga memperkenalkan beberapa topik

39
00:01:51,170 --> 00:01:53,420
itu hanya baik untuk diketahui,

40
00:01:53,420 --> 00:01:56,910
karena mendapatkan gambaran besarnya sebelum menyelam lebih dalam

41
00:01:56,910 --> 00:02:00,920
menurut saya, merupakan teknik pembelajaran yang luar biasa.

42
00:02:00,920 --> 00:02:05,083
Oleh karena itu, mari kita bongkar sedikit sekarang.

43
00:02:06,130 --> 00:02:08,390
Jadi inilah sembilan topik JavaScript

44
00:02:08,390 --> 00:02:11,630
yang akan kita bahas secara singkat dalam kuliah ini,

45
00:02:11,630 --> 00:02:12,933
sedikit disusun ulang.

46
00:02:13,820 --> 00:02:16,700
Dan dimulai dengan bagian tingkat tinggi,

47
00:02:16,700 --> 00:02:18,180
seperti yang mungkin sudah Anda ketahui,

48
00:02:18,180 --> 00:02:20,940
setiap program yang berjalan di komputer Anda

49
00:02:20,940 --> 00:02:23,530
memerlukan beberapa sumber daya perangkat keras,

50
00:02:23,530 --> 00:02:28,000
seperti memori dan CPU untuk melakukan tugasnya.

51
00:02:28,000 --> 00:02:31,980
Sekarang, ada bahasa tingkat rendah, seperti C,

52
00:02:31,980 --> 00:02:35,360
di mana Anda harus mengelola sumber daya ini secara manual.

53
00:02:35,360 --> 00:02:36,210
Misalnya,

54
00:02:36,210 --> 00:02:40,630
meminta memori komputer untuk membuat variabel baru.

55
00:02:40,630 --> 00:02:41,810
Di sisi lain,

56
00:02:41,810 --> 00:02:46,470
Anda memiliki bahasa tingkat tinggi seperti JavaScript dan Python,

57
00:02:46,470 --> 00:02:49,880
dimana kita tidak perlu mengelola sumber daya sama sekali

58
00:02:49,880 --> 00:02:53,660
karena bahasa-bahasa ini memiliki apa yang disebut abstraksi

59
00:02:53,660 --> 00:02:56,560
yang menghilangkan semua pekerjaan itu dari kita.

60
00:02:56,560 --> 00:02:59,700
Hal ini membuat bahasa lebih mudah dipelajari dan digunakan,

61
00:02:59,700 --> 00:03:03,710
namun kelemahannya adalah program tidak akan pernah secepat ini

62
00:03:03,710 --> 00:03:08,170
atau dioptimalkan seperti misalnya program C.

63
00:03:08,170 --> 00:03:10,170
Sekarang, salah satu alat yang ampuh

64
00:03:10,170 --> 00:03:13,530
yang menghilangkan manajemen memori dari kami para pengembang

65
00:03:13,530 --> 00:03:15,690
adalah pengumpulan sampah,

66
00:03:15,690 --> 00:03:17,700
yang pada dasarnya adalah sebuah algoritma

67
00:03:17,700 --> 00:03:19,780
di dalam mesin JavaScript,

68
00:03:19,780 --> 00:03:23,370
yang secara otomatis menghapus objek lama yang tidak terpakai

69
00:03:23,370 --> 00:03:24,970
dari memori komputer

70
00:03:24,970 --> 00:03:29,430
agar tidak menyumbatnya dengan hal-hal yang tidak perlu.

71
00:03:29,430 --> 00:03:33,490
Jadi ini seperti JavaScript memiliki petugas kebersihan

72
00:03:33,490 --> 00:03:36,750
yang membersihkan ingatan kita dari waktu ke waktu

73
00:03:36,750 --> 00:03:40,350
sehingga kita tidak perlu melakukannya secara manual dalam kode kita.

74
00:03:40,350 --> 00:03:43,440
Selanjutnya, JavaScript ditafsirkan

75
00:03:43,440 --> 00:03:46,620
atau bahasa kompilasi just-in-time.

76
00:03:46,620 --> 00:03:50,070
Dan sekali lagi, kita akan mempelajarinya lebih lanjut di bagian ini,

77
00:03:50,070 --> 00:03:51,990
tapi apa yang perlu Anda ketahui untuk saat ini

78
00:03:51,990 --> 00:03:54,080
apakah itu prosesor komputer

79
00:03:54,080 --> 00:03:58,750
hanya mengerti angka nol dan satu, betul.

80
00:03:58,750 --> 00:04:01,880
Pada akhirnya, setiap program perlu ditulis

81
00:04:01,880 --> 00:04:06,840
dalam angka nol dan satu, yang juga disebut kode mesin.

82
00:04:06,840 --> 00:04:10,860
Dan karena menulis itu tidak praktis, bukan?

83
00:04:10,860 --> 00:04:14,630
Kami cukup menulis kode JavaScript yang dapat dibaca manusia,

84
00:04:14,630 --> 00:04:18,020
yang merupakan abstraksi atas kode mesin,

85
00:04:18,020 --> 00:04:21,020
tetapi kode ini pada akhirnya perlu diterjemahkan

86
00:04:21,020 --> 00:04:22,590
ke kode mesin.

87
00:04:22,590 --> 00:04:25,330
Dan langkah itu bisa berupa kompilasi

88
00:04:25,330 --> 00:04:27,370
atau menafsirkan.

89
00:04:27,370 --> 00:04:31,220
Langkah ini diperlukan dalam setiap bahasa pemrograman

90
00:04:31,220 --> 00:04:34,700
karena tidak ada yang menulis kode mesin secara manual.

91
00:04:34,700 --> 00:04:36,360
Dalam kasus JavaScript,

92
00:04:36,360 --> 00:04:39,283
ini terjadi di dalam mesin JavaScript.

93
00:04:40,500 --> 00:04:44,380
Nah, salah satu hal yang membuat JavaScript begitu populer

94
00:04:44,380 --> 00:04:48,150
adalah fakta bahwa ini adalah bahasa multi-paradigma.

95
00:04:48,150 --> 00:04:51,400
Dalam pemrograman, paradigma adalah sebuah pendekatan

96
00:04:51,400 --> 00:04:55,100
dan pola pikir keseluruhan dalam menyusun kode kita,

97
00:04:55,100 --> 00:04:59,060
yang pada akhirnya akan mengarahkan gaya dan teknik pengkodean

98
00:04:59,060 --> 00:05:02,920
dalam sebuah proyek yang menggunakan paradigma tertentu.

99
00:05:02,920 --> 00:05:06,450
Dan definisi ini masih terdengar abstrak,

100
00:05:06,450 --> 00:05:07,580
tapi jangan khawatir,

101
00:05:07,580 --> 00:05:10,223
itu akan menjadi lebih jelas seiring kita melanjutkan.

102
00:05:11,100 --> 00:05:13,610
Saat ini, tiga paradigma yang populer adalah;

103
00:05:13,610 --> 00:05:16,090
prosedural, berorientasi objek,

104
00:05:16,090 --> 00:05:18,440
dan pemrograman fungsional.

105
00:05:18,440 --> 00:05:22,400
Jadi pemrograman prosedural adalah apa yang telah kami lakukan sejauh ini,

106
00:05:22,400 --> 00:05:25,230
yang pada dasarnya hanya mengatur kode

107
00:05:25,230 --> 00:05:27,350
dengan cara yang sangat linear,

108
00:05:27,350 --> 00:05:30,320
dan kemudian dengan beberapa fungsi di antaranya.

109
00:05:30,320 --> 00:05:32,310
Sekarang tentang pemrograman berorientasi objek

110
00:05:32,310 --> 00:05:33,970
dan pemrograman fungsional,

111
00:05:33,970 --> 00:05:36,470
Saya akan membicarakannya sebentar lagi.

112
00:05:36,470 --> 00:05:40,440
Selain itu, kita dapat mengklasifikasikan paradigma sebagai hal yang penting

113
00:05:40,440 --> 00:05:45,280
atau sebagai deklaratif, tapi sekali lagi, akan dibahas lebih lanjut nanti.

114
00:05:45,280 --> 00:05:48,430
Sekarang, banyak bahasa yang hanya bersifat prosedural

115
00:05:48,430 --> 00:05:50,500
atau hanya berorientasi objek

116
00:05:50,500 --> 00:05:52,280
atau hanya fungsional,

117
00:05:52,280 --> 00:05:55,020
tapi JavaScript melakukan semuanya.

118
00:05:55,020 --> 00:05:58,190
Jadi ini sangat fleksibel dan serbaguna.

119
00:05:58,190 --> 00:06:01,520
Jadi kita bisa melakukan apa pun yang kita inginkan dengannya.

120
00:06:01,520 --> 00:06:05,380
Itu pilihan kita. Kita bisa menggunakan paradigma apa pun yang kita inginkan.

121
00:06:05,380 --> 00:06:08,703
Dan dalam kursus ini, saya akan menunjukkan cara menggunakan semuanya.

122
00:06:09,810 --> 00:06:13,620
Jadi, tentang sifat JavaScript yang berorientasi objek,

123
00:06:13,620 --> 00:06:17,840
ini adalah pendekatan berorientasi objek berbasis prototipe.

124
00:06:17,840 --> 00:06:19,670
Sekarang, apa maksudnya?

125
00:06:19,670 --> 00:06:24,670
Pertama, hampir semua yang ada di JavaScript adalah sebuah objek,

126
00:06:24,750 --> 00:06:26,900
kecuali nilai-nilai primitif

127
00:06:26,900 --> 00:06:30,040
seperti angka, string, dan sebagainya.

128
00:06:30,040 --> 00:06:33,230
Namun array, misalnya, hanyalah sebuah objek.

129
00:06:33,230 --> 00:06:36,640
Dan kita sudah melihatnya dalam praktik, bukan?

130
00:06:36,640 --> 00:06:40,760
Sekarang, pernahkah Anda bertanya-tanya mengapa kita bisa membuat array

131
00:06:40,760 --> 00:06:44,640
dan kemudian gunakan metode Push di atasnya, misalnya?

132
00:06:44,640 --> 00:06:48,840
Ya, itu karena warisan prototipe.

133
00:06:48,840 --> 00:06:53,140
Pada dasarnya, kita membuat array dari cetak biru array,

134
00:06:53,140 --> 00:06:57,480
yang seperti templat dan ini disebut prototipe.

135
00:06:57,480 --> 00:07:01,170
Prototipe ini berisi semua metode array

136
00:07:01,170 --> 00:07:03,860
dan array yang kita buat dalam kode kita

137
00:07:03,860 --> 00:07:07,380
lalu mewarisi metode dari cetak biru

138
00:07:07,380 --> 00:07:10,640
sehingga kita bisa menggunakannya pada array.

139
00:07:10,640 --> 00:07:12,600
Dan ini, yang baru saja saya jelaskan kepada Anda

140
00:07:12,600 --> 00:07:15,880
sebenarnya merupakan penyederhanaan yang berlebihan,

141
00:07:15,880 --> 00:07:18,560
yang mungkin masih terdengar membingungkan.

142
00:07:18,560 --> 00:07:21,540
Dan itulah alasan mengapa ada satu bagian utuh

143
00:07:21,540 --> 00:07:24,710
pada pemrograman berorientasi objek dengan JavaScript

144
00:07:24,710 --> 00:07:26,510
nanti dalam kursus.

145
00:07:26,510 --> 00:07:29,040
Tapi karena ini adalah kuliah ikhtisar besar,

146
00:07:29,040 --> 00:07:32,623
Saya ingin memperkenalkan topik ini terlebih dahulu di sini.

147
00:07:33,850 --> 00:07:36,160
Selanjutnya, JavaScript adalah sebuah bahasa

148
00:07:36,160 --> 00:07:38,440
dengan fungsi kelas satu,

149
00:07:38,440 --> 00:07:40,410
yang berarti berfungsi

150
00:07:40,410 --> 00:07:43,600
diperlakukan seperti variabel biasa.

151
00:07:43,600 --> 00:07:47,130
Jadi, kita bisa meneruskan fungsi ke fungsi lainnya

152
00:07:47,130 --> 00:07:50,870
dan kita bahkan dapat mengembalikan fungsi dari fungsi.

153
00:07:50,870 --> 00:07:53,240
Dan ini sangat ampuh

154
00:07:53,240 --> 00:07:57,480
karena memungkinkan kita menggunakan banyak teknik yang ampuh

155
00:07:57,480 --> 00:08:01,090
dan juga memungkinkan untuk pemrograman fungsional,

156
00:08:01,090 --> 00:08:02,740
yang merupakan salah satu paradigma

157
00:08:02,740 --> 00:08:05,230
yang baru saja kita bicarakan sebelumnya.

158
00:08:05,230 --> 00:08:06,370
Dan faktanya,

159
00:08:06,370 --> 00:08:10,100
kami telah menggunakan kekuatan fungsi kelas satu

160
00:08:10,100 --> 00:08:14,440
tanpa mengetahui bahwa mereka disebut fungsi kelas satu.

161
00:08:14,440 --> 00:08:17,850
Jadi ingat potongan kode yang kami tulis ini

162
00:08:17,850 --> 00:08:21,060
untuk menutup jendela modal yang kita buat sebelumnya.

163
00:08:21,060 --> 00:08:24,320
Jadi di sini, kita meneruskan fungsi closeModal

164
00:08:24,320 --> 00:08:26,770
ke dalam fungsi addEventListener

165
00:08:26,770 --> 00:08:30,453
seolah-olah itu hanya variabel biasa, bukan?

166
00:08:31,400 --> 00:08:35,740
Dan sebenarnya tidak semua bahasa memiliki fungsi kelas satu,

167
00:08:35,740 --> 00:08:39,100
tapi JavaScript punya, dan itu luar biasa.

168
00:08:39,100 --> 00:08:41,623
Percayalah, ini sangat, sangat membantu.

169
00:08:43,130 --> 00:08:47,580
Selanjutnya saya katakan bahwa JavaScript adalah bahasa yang dinamis

170
00:08:47,580 --> 00:08:51,170
dan dinamis sebenarnya berarti diketik secara dinamis.

171
00:08:51,170 --> 00:08:53,040
Jadi seperti yang telah kita lihat,

172
00:08:53,040 --> 00:08:57,720
di JavaScript, kami tidak menetapkan tipe data ke variabel.

173
00:08:57,720 --> 00:08:59,980
Sebaliknya, mereka hanya diketahui

174
00:08:59,980 --> 00:09:04,130
ketika mesin JavaScript mengeksekusi kode kita.

175
00:09:04,130 --> 00:09:07,650
Selain itu, jenis variabel dapat dengan mudah diubah

176
00:09:07,650 --> 00:09:10,100
saat kami menetapkan ulang variabel.

177
00:09:10,100 --> 00:09:14,300
Dan pada dasarnya inilah yang dimaksud dengan pengetikan dinamis.

178
00:09:14,300 --> 00:09:18,670
Sekarang ada banyak kontroversi apakah ini baik atau buruk,

179
00:09:18,670 --> 00:09:21,340
tapi begitulah cara kerjanya.

180
00:09:21,340 --> 00:09:23,050
Sekarang, hal yang sama tidak benar

181
00:09:23,050 --> 00:09:25,540
untuk sebagian besar bahasa pemrograman lainnya,

182
00:09:25,540 --> 00:09:29,450
di mana kita harus menetapkan tipe secara manual, ke variabel.

183
00:09:29,450 --> 00:09:32,970
Dan ini biasanya mencegah terjadinya bug,

184
00:09:32,970 --> 00:09:36,430
itulah alasan mengapa banyak orang mengatakan itu JavaScript

185
00:09:36,430 --> 00:09:39,920
harus menjadi bahasa yang diketik dengan kuat juga.

186
00:09:39,920 --> 00:09:43,800
Dan jika Anda sendiri ingin menggunakan JavaScript dengan tipe,

187
00:09:43,800 --> 00:09:46,513
maka Anda selalu dapat melihat ke dalam TypeScript.

188
00:09:47,420 --> 00:09:51,300
Tapi bagaimanapun, sekarang mari kita bicara tentang single-thread

189
00:09:51,300 --> 00:09:55,270
dan model konkurensi loop peristiwa non-pemblokiran.

190
00:09:55,270 --> 00:09:57,870
Sekarang ini adalah topik yang sangat kompleks

191
00:09:57,870 --> 00:10:01,420
dan mungkin yang paling rumit dari keseluruhan kursus,

192
00:10:01,420 --> 00:10:04,930
itulah mengapa ini seperti di akhir kursus.

193
00:10:04,930 --> 00:10:05,780
Dan oleh karena itu,

194
00:10:05,780 --> 00:10:09,040
Saya belum akan membahas secara spesifik di sini,

195
00:10:09,040 --> 00:10:12,810
namun sebagai gantinya saya hanya akan menjelaskan beberapa hal di sini.

196
00:10:12,810 --> 00:10:16,840
Pertama, apa sebenarnya model konkurensi itu?

197
00:10:16,840 --> 00:10:19,190
Ya, itu hanya istilah mewah

198
00:10:19,190 --> 00:10:23,260
itu berarti bagaimana mesin JavaScript menangani banyak tugas

199
00:10:23,260 --> 00:10:25,540
terjadi pada saat yang bersamaan.

200
00:10:25,540 --> 00:10:27,460
Tidak, oke. Itu keren.

201
00:10:27,460 --> 00:10:30,180
Tapi mengapa kita membutuhkan itu?

202
00:10:30,180 --> 00:10:35,180
Karena JavaScript sendiri berjalan dalam satu thread,

203
00:10:35,310 --> 00:10:39,040
yang berarti ia hanya dapat melakukan satu hal dalam satu waktu

204
00:10:39,040 --> 00:10:41,570
maka dari itu diperlukan cara penanganannya

205
00:10:41,570 --> 00:10:44,930
beberapa hal terjadi secara bersamaan.

206
00:10:44,930 --> 00:10:47,180
Dan omong-omong, dalam komputasi,

207
00:10:47,180 --> 00:10:50,280
utas seperti serangkaian instruksi

208
00:10:50,280 --> 00:10:53,800
yang dieksekusi di CPU komputer.

209
00:10:53,800 --> 00:10:56,830
Jadi pada dasarnya, thread adalah tempat kode kita

210
00:10:56,830 --> 00:11:00,263
sebenarnya dieksekusi di prosesor mesin.

211
00:11:01,120 --> 00:11:05,400
Baiklah. Namun bagaimana jika ada tugas jangka panjang,

212
00:11:05,400 --> 00:11:08,690
seperti mengambil data dari server jauh?

213
00:11:08,690 --> 00:11:12,410
Sepertinya itu akan memblokir satu thread

214
00:11:12,410 --> 00:11:15,030
di mana kodenya berjalan, kan?

215
00:11:15,030 --> 00:11:17,480
Namun tentu saja kita tidak menginginkan hal itu.

216
00:11:17,480 --> 00:11:21,410
Apa yang kita inginkan adalah apa yang disebut dengan perilaku non-blocking

217
00:11:21,410 --> 00:11:24,210
dan bagaimana kita mencapainya?

218
00:11:24,210 --> 00:11:27,680
Nah, dengan menggunakan apa yang disebut event loop.

219
00:11:27,680 --> 00:11:30,480
Perulangan peristiwa membutuhkan tugas yang berjalan lama,

220
00:11:30,480 --> 00:11:32,440
mengeksekusinya di latar belakang

221
00:11:32,440 --> 00:11:34,910
dan kemudian menempatkannya kembali di thread utama

222
00:11:34,910 --> 00:11:37,010
setelah semuanya selesai.

223
00:11:37,010 --> 00:11:38,430
Dan ini, secara ringkas,

224
00:11:38,430 --> 00:11:42,040
Model konkurensi loop peristiwa non-pemblokiran JavaScript

225
00:11:42,040 --> 00:11:44,100
dengan satu benang.

226
00:11:44,100 --> 00:11:46,990
Kedengarannya seperti seteguk pastinya

227
00:11:46,990 --> 00:11:47,823
tapi pada akhirnya,

228
00:11:47,823 --> 00:11:51,230
itu benar-benar hanya memampatkan ini.

229
00:11:51,230 --> 00:11:53,160
Ingatlah bahwa, sekali lagi,

230
00:11:53,160 --> 00:11:57,373
ini adalah penyederhanaan berlebihan yang akan kita bahas kembali.

231
00:11:58,340 --> 00:11:59,230
Baiklah.

232
00:11:59,230 --> 00:12:02,710
Dan inilah ringkasan kuliah ikhtisar ini.

233
00:12:02,710 --> 00:12:05,680
Saya tahu ada banyak hal yang perlu diambil,

234
00:12:05,680 --> 00:12:08,380
tapi saya harap Anda masih mempelajari satu atau dua hal di sini.